let divMain = document.getElementById('divMain');
// 通过变量记住当前class的值
let current = 'a1';

// 四个移动的方法
let n1 = document.getElementById('n1');
let n2 = document.getElementById('n2');
let n3 = document.getElementById('n3');
let n4 = document.getElementById('n4');

// 通过变量记住谁是当前被激活的元素
let ecurrent = n1;

n1.addEventListener('click', () => {
  // 移除当前的class
  divMain.classList.remove(current);
  // 添加当前点击的class
  divMain.classList.add('a1');
  // 更换当前的class
  current = 'a1';

  ecurrent.classList.remove('active');
  n1.classList.add('active');
  ecurrent = n1;
});

n2.addEventListener('click', () => {
  // 移除当前的class
  divMain.classList.remove(current);
  // 添加当前点击的class
  divMain.classList.add('a2');
  // 更换当前的class
  current = 'a2';

  ecurrent.classList.remove('active');
  n2.classList.add('active');
  ecurrent = n2;
});

n3.addEventListener('click', () => {
  // 移除当前的class
  divMain.classList.remove(current);
  // 添加当前点击的class
  divMain.classList.add('a3');
  // 更换当前的class
  current = 'a3';

  ecurrent.classList.remove('active');
  n3.classList.add('active');
  ecurrent = n3;
});

n4.addEventListener('click', () => {
  // 移除当前的class
  divMain.classList.remove(current);
  // 添加当前点击的class
  divMain.classList.add('a4');
  // 更换当前的class
  current = 'a4';

  ecurrent.classList.remove('active');
  n4.classList.add('active');
  ecurrent = n4;
});
